<template>
	<div class="home">
		<el-card :shadow="shadow">
			<div class="home-header">
				<div class="home-header-greetings">
					<div class="greetings-text">您好 {{ username }} ！祝您新的一天工作愉快。</div>
					<div class="greetings-weather">个性化换脸系统的说明书如下</div>
				</div>
				<div class="home-header-todo">
					<div v-for="todo in todoList" :key="todo">
						<div class="todo-title">
							<el-icon :color="todo.color" style="vertical-align: middle;">
								<component :is="todo.icon"></component>
							</el-icon>
							<span style="vertical-align: middle;">{{ todo.name }}</span>
						</div>
						<div class="todo-num">{{ todo.untreated }}/{{ todo.total }}</div>
					</div>
				</div>
			</div>
		</el-card>
		<div class="home-main">
			<div class="home-main-card">
				<el-card v-for="(card, index) in instructions" :key="index" :shadow="shadow"
					:style="{ flex: 1, padding: '2rem 0', marginLeft: index == 0 ? '0' : '0.3rem' }">
					<div class="main-card-value">
						<el-icon :color="card.color" style="vertical-align: middle;">
							<component :is="card.icon"></component>
						</el-icon>
						<span class="card-value-num">{{ card.description }}</span>
					</div>
					<div class="main-card-text">{{ card.name }}</div>
				</el-card>
			</div>

			<div class="home-main-document-card">
				<el-card v-for="(card, index) in document" :key="index" :shadow="shadow"
					:style="{ flex: 1, padding: '2rem 0', marginLeft: '0.3rem' }">
					<div class="main-document-card-value">
						<el-icon :color="card.color" style="vertical-align: middle;">
							<component :is="card.icon"></component>
						</el-icon>
						<span class="doucument-card-value-description">{{ card.description }}</span>
						<span class="doucument-card-value-specify">{{ card.specify }}</span>
					</div>
				</el-card>
			</div>
		</div>
	</div>
</template>
<script setup>
import { onMounted, reactive, toRefs } from 'vue'
import * as echarts from 'echarts'
import { useUserStore } from '../store/settings'

const userStore = useUserStore();
const state = reactive({
	username: userStore.getUser.username == null ? '未登录' : userStore.getUser.username,
	shadow: 'always',
	todoList: [],
	instructions: [],
	document: []
})

const {
	username, shadow, todoList, cards, instructions, document
} = toRefs(state)

onMounted(() => {
	onTodoList();
	onInstructions();
	onDocutment();
})

const onTodoList = () => {
	// state.todoList = [
	// 	{ name: '待办事项', total: 100, untreated: 28, icon: 'Bell', color: '#f56c6c' },
	// 	{ name: '待办事项', total: 84, untreated: 78, icon: 'ChatDotSquare', color: '#0084ff' },
	// 	{ name: '待办事项', total: 25, untreated: 21, icon: 'Warning', color: '#63ba4d' },
	// 	{ name: '待办事项', total: 12, untreated: 5, icon: 'Edit', color: '#006000' },
	// ]
	state.todoList = [
		{ name: '主要阶段', total: 7, untreated: 1, icon: 'Bell', color: '#f56c6c' },
	]
}

const onInstructions = () => {
	state.instructions = [
		{ name: '主要阶段1', description: "新建工作组", icon: 'AddLocation', color: '#006000' },
		{ name: '主要阶段2', description: "提取视频帧", icon: 'Coin', color: '#f56c6c' },
		{ name: '主要阶段3', description: "提取人脸", icon: 'Collection', color: '#0084ff' },
		{ name: '主要阶段4', description: "训练模型", icon: 'HelpFilled', color: '#63ba4d' },
		{ name: '主要阶段5', description: "融合人脸", icon: 'Histogram', color: '#67C23A' },
		{ name: '主要阶段6', description: "导出视频", icon: 'Microphone', color: '#E6A23C' },
	]
}

const onDocutment = () => {
	state.document = [
		{
			name: '主要阶段1', description: "新建工作组", step: "step1 step2", icon: 'AddLocation', color: '#006000', specify:
				"请为您的工作台新建一个工作组,并在列表中选定您想要操作的工作组\n在step2中为您的工作组上传换脸素材所在视频（源视频—）和您想要替换人脸的视频（目标视频）"
		},
		{ name: '主要阶段2', description: "提取视频帧", step: "step1 step2", icon: 'Coin', color: '#f56c6c',specify:
				"本阶段，请按照您的需求，新建一个工作来提取视频帧，包含源视频 和 目标视频的帧提取，首先点击开启日志，然后运行，可以动态查看工作状况"},
		{ name: '主要阶段3', description: "提取人脸", step: "step1 step2", icon: 'Collection', color: '#0084ff',specify:
				"本阶段，请按照您的需求，新建一个工作来提取人脸，包含源视频 和 目标视频的人脸提取，首先点击开启日志，然后运行，可以动态查看工作状况" },
		{ name: '主要阶段4', description: "训练模型", step: "step1 step2", icon: 'HelpFilled', color: '#63ba4d',specify:
				"本阶段，请按照您的需求，新建一个工作来进行训练，训练的模型有Quick96 和 SHAED 两种，首先点击开启日志，然后运行，可以动态查看工作状况" },
		{ name: '主要阶段5', description: "融合人脸", step: "step1 step2", icon: 'Histogram', color: '#67C23A',specify:
				"本阶段，请按照您的需求，新建一个工作来进行人脸融合，提供了3个人脸融合的重要参数选择，首先点击开启日志，然后运行，可以动态查看工作状况" },
		{ name: '主要阶段6', description: "导出视频", step: "step1 step2", icon: 'Microphone', color: '#E6A23C',specify:
				"本阶段，请在列表中选定您想要导出视频的工作组，导出时间较长，请耐心等待" },
	]
}

</script>
<style lang="scss" scoped>
.home {
	min-height: 100vh;
	overflow-y: auto;

	.home-header {
		display: flex;
		justify-content: space-between;
		padding: 1rem 4rem;

		.home-header-greetings {
			.greetings-text {
				font-size: 18px;
				padding-bottom: 0.6rem;
			}

			.greetings-weather {
				font-size: 13px;
				color: var(--t6);
			}
		}

		.home-header-todo {
			display: flex;

			div {
				padding: 0 0.6rem;

				.todo-title {
					font-size: 14px;
					color: var(--t6);
					padding-bottom: 1rem;

					.el-icon {
						padding-right: 0.2rem;
					}
				}

				.todo-num {
					font-size: 18px;
					font-weight: 700;
					padding-left: 1.8rem;
				}
			}
		}
	}

	.home-main {
		min-height: 0;
		/* 允许子元素在必要时超出容器高度 */
		flex-shrink: 0;
		/* 防止flex子元素缩小 */
		margin-bottom: 200px;

		/* 添加一个大的底部边距用于测试 */
		.home-main-card {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			text-align: center;
			padding: 0.3rem 0;

			.main-card-value {
				font-size: 20px;
				font-weight: 700;

				.card-value-num {
					padding: 0 0.4rem;
					vertical-align: middle;
				}

				.main-card-text {
					font-size: 14px;
					padding-top: 0.4rem;
					color: var(--t6);
				}
			}

			.home-main-document-card {
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				align-items: stretch;
				flex-wrap: wrap;
				/* 允许子项在必要时换行 */
				gap: 10px;
				padding: 0.3rem 0;

				.main-document-card-value {
					display: flex;
					/* 使用 flexbox */
					justify-content: space-between;
					/* 子元素分散对齐到开始和结束位置 */
					align-items: center;
					/* 垂直居中对齐 */
					flex-wrap: wrap;
					/* 允许子项在必要时换行 */
					width: 100%;
					/* 确保占满整个容器宽度 */
				}


			}




		}

	}

	.doucument-card-value-description {

		font-size: 20px;
		font-weight: 700;
		padding: 0 0.4rem;
		vertical-align: middle;
		text-align: left;
		/* 文字对齐到左边 */
	}

	.doucument-card-value-specify {
		font-size: 20px;
		font-weight: 100;
		padding: 0 0.4rem;
		vertical-align: middle;
		text-align: right;
		/* 文字对齐到右边 */
	}

}
</style>
